@mixin snapcraft-details-heading {
  .p-snap-heading {
    display: flex;
    flex-wrap: wrap;


    &__icon {
      align-self: flex-start;
      flex-shrink: 0;
      margin-right: $sp-medium;
      max-height: 3.75rem;
      max-width: 3.75rem;
      vertical-align: middle;
      width: auto;
    }

    &__title {
      flex-grow: 1;
      margin: 0;
      margin-bottom: $sp-large;

      .p-inline-list--middot {
        margin-bottom: 0;
      }

      @media screen and (min-width: $breakpoint-medium) {
        margin-bottom: 0;
      }

    }

    &__name {
      margin-bottom: 0;
    }

    &__publisher {
      margin-bottom: 0;
      margin-top: -.5rem;
    }

    @media screen and (min-width: $breakpoint-medium) {

      &__title {
        margin-top: -2 * $sp-x-small;
      }
    }
  }

  .p-snap-install-buttons {
    flex-grow: 1;
    text-align: right;

    .p-snap-install-buttons__install,
    .p-snap-install-buttons__versions {
      margin-bottom: 2 * $sp-unit;
      position: relative;
      z-index: 5;
    }

    @media screen and (min-width: $breakpoint-medium) {
      margin-top: $sp-unit; // align with snap name baseline
    }

    button:last-child {
      margin-right: 0;
    }

    .p-snap-install-buttons__install {
      &.is-active {
        background-color: darken($color-positive, 10%);
      }
    }

    .p-snap-install-buttons__versions {
      &.is-active {
        background-color: darken($color-light, 10%);
      }
    }
  }

  .p-view-store-button,
  .p-cli-install {
    margin-bottom: $input-margin-bottom;
  }

  .p-channel-map {
    background: $color-x-light;
    box-shadow: 0 1px 5px 1px transparentize($color-x-dark, .8);
    max-width: 45rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;

    @media screen and (max-width: $breakpoint-medium) {
      border: {
        bottom: 1px solid $color-mid-light;
        top: 1px solid $color-mid-light;
      }
      box-shadow: none;
      margin-top: -$spv-outer--shallow-scaleable;
      max-width: 100%;
      overflow: visible;
      position: static;
    }

    @media screen and (max-width: $breakpoint-small) {
      margin-top: 0;
    }

    label {
      margin-bottom: $spv-outer--small + $spv-nudge-compensation;
    }

    &.is-closed {
      display: none;
    }

    .p-channel-map__form {
      justify-content: space-between;
      width: 100%;
    }

    &__row {
      @extend %vf-clearfix;
      margin: 0;
      padding-bottom: $sp-x-large;

      // hide install instructions when no release in channel
      &--closed {
        .p-code-copyable {
          display: none;
        }
      }

      &--heading {
        padding-bottom: 0;
        padding-top: 0;

        @media screen and (max-width: $breakpoint-medium) {
          display: none;
        }
      }
    }

    // align track select with candidate input
    &__track-field {
      margin-top: $sp-large;
    }

    &__channel-name {
      display: inline-block;
      font-weight: 400;
      padding-top: $sp-x-small;
    }

    .p-tabs::before {
      display: none; // hide mobile arror thingy
    }

    &__hide {
      background-color: transparent;
      background-size: $sp-medium $sp-medium;
      border: 0;
      padding: $sp-small;
      position: absolute;
      right: $sp-small;
      top: $sp-small;
    }
  }

  .p-channel-map__tab {
    display: none;
    overflow: hidden;

    &.is-open {
      display: flex;
    }
  }

  .p-channel-map-overlay {
    bottom: 0;
    height: auto;
    left: 0;
    margin-top: 0;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transition: opacity 500ms;
    width: 100%;
    z-index: 4;

    .is-closed + & {
      opacity: 0;
    }

    @media screen and (max-width: $breakpoint-medium) {
      pointer-events: none;
    }
  }

  // positioning fixes for track tooltip
  .p-tooltip.is-icon {
    .p-tooltip__message {
      left: -3rem; // position in bottom-left under the label and icon

      &::before {
        left: 3rem; // reposition arrow correctly under the icon
      }
    }
  }

  .p-channel-map__slides {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    transition: transform .333s;

    &.show-right {
      transform: translateX(-100%);
    }

    &.show-left {
      transform: translate(0);
    }

    .p-channel-map__slide {
      flex-shrink: 0;
      width: 100%;
    }
  }

  .p-channel-map__version-table {
    margin-bottom: $spv-outer--medium;
    max-height: 16rem;
    overflow: auto;

    @media screen and (max-width: $breakpoint-medium) {
      max-height: 100%;
    }

    &-install {
      display: none;
    }

    tbody tr {
      cursor: pointer;

      &:hover {
        background-color: $color-light;

        .p-channel-map__version-table-install {
          display: block;
        }
      }

      &.is-highlighted {
        td:first-child {
          font-weight: 400;
        }
      }

      &.no-border {
        border-top-color: transparent;
      }
    }

    @media screen and (max-width: $breakpoint-medium) {
      th:nth-child(4) {
        width: 20%;
      }

      .p-channel-map__version-table-install {
        display: block;
      }
    }

    td {
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
